<script setup lang="ts">
import { inject, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Directory from '@/components/Directory.vue';

const yourDirectoryData = [
    {
        name: 'Parent 1',
        children: [
            { name: 'Child 1' },
            { name: 'Child 2', children: [{ name: 'Grandchild 1' }] }
        ]
    },
    {
        name: 'Parent 2'
    }
];

defineProps({
    directory: {
        type: Array,
        required: true
    }
});
const router = useRouter();
const route = useRoute();

interface IKnowledgelist {
    id: string;
    title: string;
    synopsis: string
}

const input = ref('')

const goToKnowledgeBase = () => {
    router.push('/knowledgeBase')
}

</script>

<template>
    <div class="KnowledgeBaseList">
        <el-container>
            <el-aside class="aside">
                <div class="breadcrumb" @click="goToKnowledgeBase">
                    <el-icon size="20">
                        <House />
                    </el-icon>
                    <span style="padding: 0 0.3em;">回到知识库</span>
                </div>
                <div class="title">
                    <el-icon size="22" color="#409eff">
                        <Document />
                    </el-icon>
                    <span style="padding-left: 1em;">默认知识库</span>
                </div>
                <div class="searchAndAdd">
                    <div class="search">
                        <el-input v-model="input" placeholder="Please input">
                            <template #prepend>
                                <el-button icon="Search" />
                            </template>
                        </el-input>
                    </div>
                    <el-button icon="Plus" />
                </div>

                <div class="index">
                    <el-icon size="15">
                        <House />
                    </el-icon>
                    <span style="padding-left: 1em;">首页</span>
                </div>
                <div class="catalogue">
                    <div class="top">
                        <el-icon>
                            <Expand />
                        </el-icon>
                        <span style="padding-left: 1em;">目录</span>
                    </div>
                    <Directory :directory="yourDirectoryData" />
                </div>
            </el-aside>
            <el-main style="background-color: #f4f5f5;">
                <div class="main">
                    <div class="container">
                        <div class="title">
                            title
                        </div>
                        <div class="content">
                            main
                        </div>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<style lang="less" scoped>
.KnowledgeBaseList {
    width: 100%;
    min-height: 100vh;

    .aside {
        width: 300px;
        padding: 1em;
        height: 100vh;

        .breadcrumb {
            display: flex;
            align-items: center;
            font-size: 0.8em;
            color: #8a8f8d;
            cursor: pointer;
        }

        .title {
            display: flex;
            align-items: center;
            color: #262626;
            font-weight: bold;
            padding: 1.3em 0;
            font-size: 0.95em;
            border-bottom: 1px solid #eff0f0;
        }

        .searchAndAdd {
            display: flex;
            align-items: center;

            .search {
                padding: 1em 0.3em 1em 0;
            }
        }

        .index {
            display: flex;
            align-items: center;
            font-size: 0.8em;
            background-color: #eff0f0;
            padding: 0.8em;
            border-radius: 5px;
        }

        .catalogue {
            padding: 0.8em;
            font-size: 0.8em;
        }
    }

    .main {
        display: flex;
        justify-content: center;

        .container {
            width: 80%;

            .title {
                font-family: Chinese Quote, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji;
                font-size: 36px;
                line-height: 1.389;
                font-weight: 700;
            }
        }
    }

}
</style>
